<script>
    var sendVerifier = require('mobile-handle').sendSmsVerify;
    var verifier = require('mobile-handle').smsVerify;

    $(function () {

        var form = new Vue({
            el:'#form',
            data:{
                delay:0,
                redirectUrl:window.redirectUrl,
            },
            methods:{
                sendSmsVerify:_.throttle(function(event){
                    if (!validator.element( "[name=phoneNum]" )){
                        return;
                    }
                    if (this.delay > 0){
                        return;
                    }

                    var self = this;
                    var that = event.target;
                    sendVerifier($("[name=phoneNum]").val(),function(ret,message){
                        if (ret){
                            self.delay = 60;
                            $(that).addClass('gray').text('已发送('+self.delay+')');
                            var delayer = setInterval(function () {
                                self.delay--;
                                $(that).text('已发送('+self.delay+')');
                                if (self.delay <= 0) {
                                    clearInterval(delayer);
                                    self.delay = 0;
                                    $(that).text('重发').removeClass('gray');
                                }
                            },1000);
                        }
                        alert(message);
                    });

                },3000),
                submit:_.throttle(function(event){
                    if (!validator.form()){
                        return;
                    }

                    var self = this;
                    verifier($("[name=phoneNum]").val(),$("[name=verifyCode]").val(),function(ret,message){
                        alert(message);
                        if (ret){
                            location.href = self.redirectUrl;
                        }
                    });

                },1500)
            }
        });

        var validator = $("#form").validate({
            rules: {
                phoneNum:{
                    required:true,
                    mobile:true,
                    ajax:{url:'/ajax/validate/phoneexists'},
                },
                verifyCode:{
                    required:true,
                }
            },
            messages: {
                phoneNum: {
                    required:'请输入手机号码',
                    ajax:'这个手机号已存在',
                },
                verifyCode:{
                    required:'请输入验证码',
                }
            }
        });
    });
</script>
<style>
    .gray {
        color:gray;
    }
</style>